// 引入echarts.js
import * as echarts from '../../ec-canvas/echarts';
let chart = null
let secondChart = null
let thirdChart = null
let fourChart = null
var that

Page({
  data:{
    ec:{ onInit: initChart},
    ec2:{ onInit: initChart2},
    ec3:{ onInit: initChart3},
    ec4:{ onInit: initChart4},
    nvabarData: {    },
      category:[
        {
          id:"power1",
          cate_name:"",
          cate_list:[
            {           
              item_name:"日用电量"
            },
            {
              item_name:"周用电量"
            },
            {
              item_name:"月用电量"
            },
            {
              item_name:"年用电量"
            }
          ]
        },
      ],
  
    categoryList:[
    {cate_name:"空调"},
    {cate_name:"电视"},
    {cate_name:"电脑"},
    {cate_name:"冰箱"},
    {cate_name:"扫地机"}
    ],
    windowsHeight:'',
    currentIndex:0, //左侧分类菜单选中索引
    toView:'',  //右侧自动滑到的id
    rightScrollTop:'',  //右侧滑动高度 
    rightTopArray:[], //记录右侧目的顶部值
  },
  
  onLoad:function(options){
    that = this
    wx.getSystemInfo({
      success: (result) => {
        that.setData({
          windowHeight:result.windowHeight
        })
      },
    })

   this.data.categoryList = getApp().globalData.category;
   this.setData({
    categoryList:this.data.categoryList
   })

  //  获取右侧item的top值
  this.data.categoryList.forEach(function(v){
    wx.createSelectorQuery()
    .select('#'+v.id)
    .boundingClientRect(function(rect){
      if(rect){
        var top = Number(rect.top)
        that.data.rightTopArray.push(top)
      }
    })
    ,exec()
  })
  },

  switchRightTab: function (e) {
    // 获取item项的id，和数组的下标值  
    let id = e.target.dataset.id,
      index = parseInt(e.target.dataset.index);
    // 把点击到的某一项，设为当前index  
    this.setData({
      curNav: id,
      curIndex: index
    })
  },

  // 左侧分类菜单点击事件
clickCategory(e){
  var index = e.currentTarget.dataset.index;
  if(index != this.data.currentIndex){
    this.setData({
      currentIndex:index,
      toView:this.data.categoryList[index].id
    })
  }
},

// 右侧滚动事件
rightScroll(e){
  that.setData({
    rightScrollTop:e.detail.scrollTop
  })

  var length = this.data.rightScrollTopArray.length;
  for(var i = 0;i<length;i++){
    // 如果当前滑动的距离，大于等于当前索引为i的条目的top ，并且小于下一个item的top
    // 则左侧的切换为当前索引i
    var scrollTop = that.data.rightScrollTop;
    var topOne = that.data.rightTopArray[0];  //最顶部的item的top
    var top = that.data.rightTopArray[i];
    if(i<length-1){
      var topNext = that.data.rightTopArray[i+1]; //当前索引为i的下一个item的top
      if(scrollTop>=top-topOne && scrollTop<topNext-topOne){
        if(that.data.currentIndex !=i){
          that.setData({
            currentIndex:i
          })
        }
      }
    }
    if(i==length-1){
      // 如果是最后一个
      if(scrollTop>=top-topOne){
        if(that.data.currentIndex !=i){
          that.setData({
            currentIndex:i
          })
        }
      }
    }
  }
},

})


// 第一张图表
function initChart(canvas,width,height,dpr){
  chart =echarts.init(canvas,null,{
    width:width,
    height:height,
    devicePixelRatio:dpr
  })
canvas.setChart(chart)

let option = getOption()  //这里是echarts的配置信息

chart.setOption(option)

return chart
}

function getOption(){
  return  {
    xAxis: {
      type: 'category',
      data: ['1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00','8:00','9:00','10:00','11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00','18:00','19:00','20:00','21:00','22:00','23:00','24:00']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [0.1,0.6,0.4,0.8,0.9,0.0,0.0,0.0,0.3,0.4,0.7,0.5,0.1,0.6,0.4,0.8,0.9,0.3,0.4,0.7,0.3,0.4,0.7,0.8],
        type: 'line',
        smooth: true
      }
    ]
  }
} 

// 第二张图表
function initChart2(canvas,width,height,dpr){
  secondChart =echarts.init(canvas,null,{
    width:width,
    height:height,
    devicePixelRatio:dpr
  })
canvas.setChart(secondChart)

let option = getOption2()  //这里是echarts的配置信息

secondChart.setOption(option)

return secondChart
}

function getOption2(){
  return{
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [2.2, 3.6, 1.5, 4.3, 2.9, 6.1, 1.8],
        type: 'line',
        smooth: true
      }
    ]
  }
}

// 第三张图表
function initChart3(canvas,width,height,dpr){
  thirdChart =echarts.init(canvas,null,{
    width:width,
    height:height,
    devicePixelRatio:dpr
  })
canvas.setChart(thirdChart)

let option = getOption3()  //这里是echarts的配置信息

thirdChart.setOption(option)

return thirdChart
}

function getOption3(){
  return{
    xAxis: {
      type: 'category',
      data: ['1', '2', '3', '4', '5', '6', '7','8','9','10','11', '12', '13', '14', '15', '16', '17','18','19','20','21', '22', '23', '24', '25', '26', '27','28','29','30']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [0.1,0.6,0.4,0.8,0.9,0.0,0.5,0.9,0.3,0.4,
                   0.7,0.5,0.1,0.6,0.4,0.8,0.9,0.3,0.4,0.7,
                    0.5,0.1,0.4,0.7,0.3,0.4,0.7,0.8,0.4,0.7],
        type: 'line',
        smooth: true
      }
    ]
  }
}

// 第四张图表
function initChart4(canvas,width,height,dpr){
  fourChart =echarts.init(canvas,null,{
    width:width,
    height:height,
    devicePixelRatio:dpr
  })
canvas.setChart(fourChart)

let option = getOption4()  //这里是echarts的配置信息

fourChart.setOption(option)

return fourChart
}

function getOption4(){
  return {
    xAxis: {
      type: 'category',
      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July','Aug','Sep','Oct','Nov','Dec']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [18,20,39,46,32,17,42,52,16,30,21,14],
        type: 'line',
        smooth: true
      }
    ]
  }
}